<template>
  <view class="home-container">
    <!-- 顶部二维码按钮 -->
    <view class="top-bar">
      <view class="qr-btn" @click="onQrClick">
        <image src="https://goat-fizzy-66366927.figma.site/file/qr.png" mode="aspectFit" class="qr-icon"></image>
      </view>
    </view>
    <!-- 中间大耳朵图标 -->
    <view class="logo-area">
      <image src="https://goat-fizzy-66366927.figma.site/file/ear.png" mode="aspectFit" class="ear-icon"></image>
    </view>
    <!-- 信息卡片 -->
    <view class="info-card">
      <view class="info-row">
        <text class="label">对方语言：</text>
        <picker :range="otherLangOptions" range-key="name" @change="onPickerChange('otherLang', $event)">
          <view class="value">{{ otherLangOptions[otherLangIndex].name }}</view>
        </picker>
      </view>
      <view class="info-row">
        <text class="label">你的语言：</text>
        <picker :range="myLangOptions" range-key="name" @change="onPickerChange('myLang', $event)">
          <view class="value">{{ myLangOptions[myLangIndex].name }}</view>
        </picker>
      </view>
      <view class="info-row">
        <text class="label">收音来源：</text>
        <picker :range="micOptions" @change="onPickerChange('mic', $event)">
          <view class="value">{{ micOptions[micIndex] }}</view>
        </picker>
      </view>
      <view class="info-row">
        <text class="label">音色：</text>
        <picker :range="voiceOptions" @change="onPickerChange('voice', $event)">
          <view class="value">{{ voiceOptions[voiceIndex] }}</view>
        </picker>
      </view>
      <view class="info-row version-row">
        <text class="label">版本：</text>
        <view class="version-dot"></view>
        <text class="version-text">V1.0.0</text>
      </view>
    </view>
    <!-- 续费卡片 -->
    <view class="renew-card">
      <view class="renew-row">
        <text>剩余时长：12小时 24分钟</text>
        <text>余额：25¥</text>
      </view>
    </view>
    <!-- 广告按钮 -->
    <button class="ad-btn" @click="onAdClick">
      <image src="https://goat-fizzy-66366927.figma.site/file/gift.png" class="gift-icon"></image>
      看广告免费续时长
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      otherLangOptions: [{code: '', name: '自动'}],
      otherLangIndex: 0,
      myLangOptions: [{code: '', name: '自动'}],
      myLangIndex: 0,
      micOptions: ['手机麦克风','系统内录'],
      micIndex: 0,
      voiceOptions: ['男声', '女声'],
      voiceIndex: 0,
      inputText: '',
      translateResult: ''
    }
  },
  onLoad() {
    // 1. 读取本地存储初始化选中项
    const otherLangIndex = uni.getStorageSync('otherLangIndex');
    const myLangIndex = uni.getStorageSync('myLangIndex');
    const micIndex = uni.getStorageSync('micIndex');
    const voiceIndex = uni.getStorageSync('voiceIndex');
    if (typeof otherLangIndex === 'number') this.otherLangIndex = otherLangIndex;
    if (typeof myLangIndex === 'number') this.myLangIndex = myLangIndex;
    if (typeof micIndex === 'number') this.micIndex = micIndex;
    if (typeof voiceIndex === 'number') this.voiceIndex = voiceIndex;

    // 2. 直接从本地读取语言列表
    const langList = uni.getStorageSync('allLanguages') || [];
    this.otherLangOptions = [{code: '', name: '自动'}, ...langList];
    this.myLangOptions = [{code: '', name: '自动'}, ...langList];
    // 恢复选中项
    if (typeof otherLangIndex === 'number' && otherLangIndex < this.otherLangOptions.length) {
      this.otherLangIndex = otherLangIndex;
    } else {
      this.otherLangIndex = 0;
    }
    if (typeof myLangIndex === 'number' && myLangIndex < this.myLangOptions.length) {
      this.myLangIndex = myLangIndex;
    } else {
      this.myLangIndex = 0;
    }
  },
  methods: {
    onQrClick() {
      uni.showToast({ title: '二维码功能开发中', icon: 'none' });
    },
    onPickerChange(key, e) {
      const idx = e.detail.value;
      if (key === 'otherLang') {
        this.otherLangIndex = idx;
        uni.setStorageSync('otherLangIndex', idx);
      }
      if (key === 'myLang') {
        this.myLangIndex = idx;
        uni.setStorageSync('myLangIndex', idx);
      }
      if (key === 'mic') {
        this.micIndex = idx;
        uni.setStorageSync('micIndex', idx);
      }
      if (key === 'voice') {
        this.voiceIndex = idx;
        uni.setStorageSync('voiceIndex', idx);
      }
    },
    onAdClick() {
      uni.showToast({ title: '广告功能开发中', icon: 'none' });
    },
    async onTranslate() {
      const text = this.inputText.trim();
      console.log('准备翻译，输入内容：', text);
      if (!text) {
        uni.showToast({ title: '请输入要翻译的内容', icon: 'none' });
        return;
      }
      // 获取code
      const from_lang = this.otherLangOptions[this.otherLangIndex].code || '';
      const to_lang = this.myLangOptions[this.myLangIndex].code || '';
      console.log('翻译参数', { text, from_lang, to_lang });
      uni.showLoading({ title: '翻译中...' });
      try {
        const res = await uni.request({
          url: 'http://127.0.0.1:8000/translate',
          method: 'POST',
          data: {
            text,
            from_lang,
            to_lang
          },
          header: {
            'content-type': 'application/json'
          }
        });
        console.log('翻译接口返回', res);
        if (res[1].statusCode === 200 && res[1].data && res[1].data.result && res[1].data.result.trans_result) {
          this.translateResult = res[1].data.result.trans_result.dst;
        } else {
          this.translateResult = '翻译失败';
          console.log('翻译失败，返回内容异常', res[1]);
        }
      } catch (e) {
        this.translateResult = '翻译失败';
        console.log('翻译异常', e);
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style>
.home-container {
  min-height: 100vh;
  background: #fff;
  padding: 0 0 30rpx 0;
}
.top-bar {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30rpx 30rpx 0 0;
}
.qr-btn {
  width: 60rpx;
  height: 60rpx;
  background: #ffc107;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-icon {
  width: 36rpx;
  height: 36rpx;
}
.logo-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40rpx 0 30rpx 0;
}
.ear-icon {
  width: 120rpx;
  height: 120rpx;
}
.info-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin: 0 30rpx;
  padding: 30rpx 20rpx 10rpx 20rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 0;
  font-size: 30rpx;
  color: #333;
}
.label {
  color: #666;
}
.value {
  color: #222;
}
.version-row {
  align-items: center;
}
.version-dot {
  width: 12rpx;
  height: 12rpx;
  background: #ff3b30;
  border-radius: 50%;
  margin: 0 10rpx;
  display: inline-block;
}
.version-text {
  color: #888;
  font-size: 26rpx;
}
.renew-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin: 30rpx 30rpx 0 30rpx;
  padding: 24rpx 20rpx;
}
.renew-row {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 28rpx;
}
.ad-btn {
  margin: 40rpx 30rpx 0 30rpx;
  background: linear-gradient(90deg, #4fc3f7, #1976d2);
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  line-height: 88rpx;
  border: none;
}
.gift-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}
</style> 